/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-15 19:28:29
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
} from 'react-native';
import {
  mainBgColorWhite,
  screenWidth,
  px2dp,
  fontColorDeepGray,
  fontColorBlack,
} from '@/styles';
import { Button } from '@/common';

import {
  iconGuoshouGreenInsurance,
  iconInsurancedTextGray,
  iconInsuranceingTextGreen,
  iconInsuranceNoTextOrange,
} from '@/images';

const { Submit } = Button;

export default class InsuranceHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const { insuranceDetailSelct } = this.props;
    return (
      <View style={styles.wrap}>
        <View style={styles.leftWrap}>
          <View style={styles.titleWrap}>
            <Image
              source={iconGuoshouGreenInsurance}
              resizeMode='contain'
              style={styles.logoImg}
            />
            <Text style={styles.title}>
              {insuranceDetailSelct.insurType == 1 ? '商业险' : '交强险'}
            </Text>
          </View>
          <Text style={styles.carWrap}>
            <Text style={styles.label}>车牌号：</Text>
            <Text style={styles.carNum}>{insuranceDetailSelct.carNo}</Text>
          </Text>
        </View>
        <Image
          source={this.renderStatusImg(insuranceDetailSelct.insurStatus)}
          resizeMode='contain'
          style={styles.statusImg}
        />
      </View>
    );
  }

  renderStatusImg = (status) => {
    switch (status) {
    case '1':
      return iconInsuranceingTextGreen;
    case '2':
      return iconInsuranceNoTextOrange;
    case '3':
      return iconInsurancedTextGray;
    }
  };
}
const styles = StyleSheet.create({
  wrap: {
    width: screenWidth,
    backgroundColor: mainBgColorWhite,
    paddingHorizontal: px2dp(32),
    paddingVertical: px2dp(32),
    marginTop: px2dp(24),
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  logoImg: {
    width: px2dp(42),
    height: px2dp(42),
    marginRight: px2dp(8),
  },
  titleWrap: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  carWrap: {
    flexDirection: 'row',
  },
  title: {
    color: fontColorBlack,
    fontSize: px2dp(32),
    fontWeight: 'bold',
  },
  carWrap: {
    fontSize: px2dp(28),
    color: fontColorDeepGray,
    marginTop: px2dp(25),
  },
  statusImg: {
    width: px2dp(169),
    height: px2dp(114),
  },
});
